import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
import "./app-visual-switch.less";

/**
 * @description 虚拟表单开关
 * @export
 * @class AppVisualSwitch
 * @extends {Vue}
 */
@Component({})
export class AppVisualSwitch extends Vue {
  /**
   * @description 编辑器实列
   * @type {*}
   * @memberof AppVisualSwitch
   */
  @Prop() editorInstance!: any;

  /**
   * @description 表单项
   * @type {*}
   * @memberof AppVisualSwitch
   */
  @Prop() public parentItem!: any;

  /**
   * @description 编辑器值
   * @type {string}
   * @memberof AppVisualSwitch
   */
  @Prop() public value!: string;

  /**
   * @description 编辑器名称
   * @type {string}
   * @memberof AppVisualSwitch
   */
  @Prop() public name!: string;

  /**
   * @description 编辑器位置
   * @type {*}
   * @memberof AppVisualSwitch
   */
  @Prop() public position!: any;

  /**
   * @description 真实控件
   * @type {string}
   * @memberof AppVisualSwitch
   */
  @Prop() realCompRef!: any;

  /**
   * @description 获取当前值
   * @readonly
   * @memberof AppVisualSwitch
   */
  get curValue() {
    return this.realCompRef.value == 1 ? true : false;
  }

  /**
   * @description 值改变
   * @memberof AppVisualSwitch
   */
  public change() {
    this.$emit("change", { name: this.name, value: this.curValue ? 0 : 1 });
  }

  /**
   * @description 绘制组件
   * @return {*}
   * @memberof AppVisualSwitch
   */
  public render() {
    return (
      <div
        class={"app-visual-switch luckysheet-mousedown-cancel"}
        style={{
          height: `${this.position.height}px`,
          lineHeight: `${this.position.height}px`,
        }}
      >
        <div
          class={{ "visual-switch": true,"luckysheet-mousedown-cancel": true, "is-checked": this.curValue }}
          onClick={() => {
            this.change();
          }}
        >
          <span class="visual-switch__core luckysheet-mousedown-cancel"></span>
        </div>
      </div>
    );
  }
}
